<template>
	<div>
		<van-nav-bar
		  title="订单详情"
			left-text="返回"
			 @click-left="handleLeftClick"
		/>
		<van-cell-group>
		  <van-cell title="订单编号"  >
				<div style="white-space: nowrap;" >
					{{formData.orderNo}}
				</div>
			</van-cell>
		  <van-cell title="订单时间" >
				<div>
					{{formData.insertTime}}
				</div>
			</van-cell>
			<van-cell title="购买商品" >
				<div>
					{{formData.goodsName}}
				</div>
			</van-cell>
			<van-cell title="购买数量" >
				<div>
					{{formData.count}}
				</div>
			</van-cell>
			<van-cell title="商品价格" >
				<div>
					{{formData.goodsPrice}}
				</div>
			</van-cell>
			<van-cell title="商品折扣" >
				<div>
					{{formData.goodsDiscount}}
				</div>
			</van-cell>
			<van-cell title="活动折扣" >
				<div>
					{{formData.activityDiscount?formData.activityDiscount:"无"}}
				</div>
			</van-cell>
			<van-cell title="活动名称" >
				<div>
					{{formData.activityName?formData.activityName:"无"}}
				</div>
			</van-cell>
			<van-cell title="实际支付" >
				<div>
					{{formData.pay}}
				</div>
			</van-cell>
			
			<van-cell title="订单状态" >
				<div>
					<template v-for="itemStatus in statusList">
						<van-tag
							v-if="formData.status == itemStatus.id"
							:key="itemStatus.id"
							:type="itemStatus.theme">
							{{itemStatus.name}}
						</van-tag>
					</template>
				</div>
			</van-cell>
			<van-cell title="物流单号" >
				<div>
					{{formData.expressNo}}
				</div>
			</van-cell>
			<van-cell title="收货人" >
				<div>
					{{formData.name}}
				</div>
			</van-cell>
			<van-cell title="手机号" >
				<div>
					{{formData.phone}}
				</div>
			</van-cell>
			<van-cell title="收货人邮编" >
				<div>
					{{formData.postCode}}
				</div>
			</van-cell>
			<van-cell title="收货人地址" >
				<div>
					{{formData.province}}
					{{formData.city}}
					{{formData.area}}
					{{formData.address}}
				</div>
			</van-cell>
			<van-cell title="备注" >
				<div>
					{{formData.remark}}
					
				</div>
			</van-cell>
			<van-cell title="下单途径" >
				<div>
					<div v-if="formData.type == 1">
						直接下单
					</div>
					<div v-else-if="formData.type == 2">
						购物车下单
					</div>
					<div v-else-if="formData.type == 3">
						拼团下单
					</div>
					<div v-else-if="formData.type == 4">
						秒杀下单
					</div>
					<div v-else>
						其他
					</div>
				</div>
			</van-cell>
		</van-cell-group>
	</div>
	
</template>

<script>
	import {findOrderByOrderNo} from '@/api/order-api.js'
	export default{
		data(){
			return {
				formData:{},
				statusList:[
					{
						id:0,
						name:'待支付',
						theme:'primary'
					},
					{
						id:1,
						name:'已支付',
						theme:'primary'
					},
					{
						id:2,
						name:'已发货',
						theme:'warning'
					},
					{
						id:3,
						name:'确认收货',
						theme:'success'
					},
					{
						id:4,
						name:'申请退货',
						theme:'danger'
					},
					{
						id:5,
						name:'退货完毕',
						theme:'success'
					}
				],
				status:1
			}
		},
		async created(){
			let orderNo = this.$route.query.orderNo
			await this.findOrderByOrderNo(orderNo)
		},
		computed:{
			formatTime(){
				return function(time){
					let d = new Date(time);
					return `${d.getFullYear()}-${d.getMonth()+1}-${d.getDate()} ${d.getHours()}:${d.getMinutes()}:${d.getSeconds()}`
				}
			}
		},
		methods:{
			handleLeftClick(){
				this.$router.history.go(-1)
			},
			async findOrderByOrderNo(orderNo){
				let res = await findOrderByOrderNo(orderNo)
				if(res.data.code == 200){
					this.formData = res.data.data
				}
			}
		}
	}
</script>

<style>
</style>
